<?php 
$content = "
<div style='width:80%; margin: 0 auto; display:inline-block; background-color:white; padding:20px; border-radius:10px; max-height:80vh; overflow-y:scroll;'>
	<div> 
		<img src='assets/logo.png' style='box-shadow:2px 2px 5px rgba(0,0,0,0.5); max-width:50px; ' valign='middle'>
		<span style='display:inline-block; font-weight:light; color:black; font-size:30px; text-shadow:2px 2px 5px rgba(0,0,0,0.5);'>Notebubble</span>
	</div>
	
	<p>Notebubbleへようこそ！このアプリは、ノートを簡単かつ迅速に保存および整理する方法を提供します。以下は、すべての機能を利用するための簡単なガイドです：</p>
	
	<h1>ヘルプとリファレンス</h1>

<div style='text-align: justify !important; text-justify: inter-word; !important'>

	<div class='section'>
		<h2>カテゴリ</h2>
		<p>ノートはカテゴリごとにグループ化されています。カテゴリを作成するには、サイドバーの<b>+</b>アイコンをクリックしてください。<br>
		<p>ここで、カテゴリに名前を付け、説明を追加することができます。また、カテゴリの画像アイコンと背景色を選択することも可能です（これらは後で変更できます）。</p><p>さらに、オプションでパスワードを設定してカテゴリを非公開にすることもできます。</p>
	</div>
	
	<div class='section'>
		<h2>ノート</h2>
		<p>ノートは「バブル」に保存されます（これがアプリの名前の由来です）。バブルは簡単なステップで作成できます：<br><br>
		ノートの作成は、作成したいカテゴリをクリックし、下部のスペースに入力して<b>送信</b>をクリックするだけです。また、キーボードの<b>Ctrl+Enter</b>キーを押してノートを送信することもできます。
		<br><br>
		ノート作成は簡単ですが、バブル作成にはさらに多くのオプションがあります：
		<br>
		
		<h3>添付ファイル</h3>
		ノートにファイルや画像を添付できます。下部フォームのクリップアイコンをクリックし、添付したいファイルを選択してください。また、すでにクリップボードにある場合はCtrl+Vで貼り付けることもできます。<br><br>
		<b>画像添付に関する注意:</b><br>
		データベースのスペースを節約するために、画像はデフォルトで軽量な形式に圧縮されてからデータベースに追加されます。元の非圧縮ファイルを保持したい場合は、投稿フォームの歯車ボタン <span style='font-weight:bold; font-family:icons; color:#2980B9;'>(  )</span> をクリックして、画像圧縮オプションを無効にし、画像をアップロードする前に圧縮を無効にしてください。
		<h3>タスクリスト</h3>
		<p>バブルには、チェックボックス付きのタスクリストを含めることができ、ToDoの進捗を追跡できます。
タスクリストアイテムを作成するには、作成中の行の先頭に「>>」を入力します。</p>
		<p>>> Oranges<br>
		>> Milk<br>
		>> Newspaper</p>
		<h3>リマインダー</h3>
		<p>ノートにリマインダーを設定でき、指定した日時にアプリが通知します。<br><br>
		リマインダーを設定するには、下部フォームの歯車アイコンをクリックし、希望の日付と時間を入力します。また、カレンダーアイコンを使用して日付と時間を選択することもできます。
		<br><br>リマインダーの時間になると、アプリはポップアップ通知を表示します。
		</p>	
		
		<h3>基本的なテキストフォーマット</h3>
		<p>限られたマークアップ構文を使用して、入力したテキストをフォーマットできます。利用可能なモードは次のとおりです：</p>
		<table style='display:inline-block;'>
		<tr><td>**テキスト**</td><td>=></td><td><b>太字のテキスト</b></td></tr>
		<tr><td>*テキスト*</td><td>=></td><td><i>斜体のテキスト</i></td></tr>
		<tr><td>__テキスト__</td><td>=></td><td><u>下線付きのテキスト</u></td></tr>
		</table>
		<br><br>
		さらに多くのオプションは、今後のアプリバージョンで利用可能になります。
	</div>

	<div class='section'>
		<h2>ノートオプション</h2>
		<p>ノートを送信した後、いくつかの操作が可能です。各ノートのアイコン<span style='font-weight:bold; font-family:icons; color:#2980B9;'></span>にカーソルを合わせると、コントロールが表示されます。利用可能なオプションは次のとおりです：
		
		<h3>削除</h3>
		不要になったノートを削除します。
		
		<h3>編集</h3>
		ノートのテキスト、添付ファイル、リマインダーを変更できます。
		
		<h3>強調表示</h3>
		重要なノートをクリックして強調表示し、迅速に見つけられるようにします。
		
		<h3>ノートを固定</h3>
		カテゴリに多数のノートがある場合や、頻繁にアクセスする必要がある場合は、固定してカテゴリの上部に通知を表示することができます。この通知をクリックすると、固定されたノートに直接移動します。
	</div>

	<div class='section'>
		<h2>カテゴリオプション</h2>
		ノートと同様に、カテゴリにもオプションがあります。カテゴリの上部にあるメニューアイコンをクリックするとアクセスできます。利用可能なオプションは次のとおりです：
		
		<h3>編集</h3>
		カテゴリの名前、説明、画像、背景、パスワード（ある場合）を編集できます。
		
		<h3>固定</h3>
		ノートと同様に、カテゴリも固定できます。これにより、カテゴリリストの上部に表示され、すばやくアクセスできます。
		
		<h3>削除</h3>
		不要になったカテゴリを削除できます。これにより、すべてのノートと添付ファイルも削除されます。
	</div>
	
	<div class='section'>
		<h2>検索</h2>
		
		ノートの内容で検索する必要がある場合は、カテゴリメニューの検索アイコンをクリックしてください。これにより検索フォームが開き、検索したいテキストを入力できます。検索を送信すると、指定されたテキストを含むノートが表示されます。
	</div>

	<div class='section'>
		<h2>アプリの設定</h2>
		
		<span style='font-weight:bold; font-family:icons; color:#2980B9;'>()</span> サイドバーメニューの歯車アイコンをクリックすると、設定ページにアクセスできます。利用可能な設定は次のとおりです：
		
		<h3>言語とタイムゾーン</h3>
		アプリの言語とタイムゾーンを変更できます。アプリの時刻や日付が正しくない場合は、最寄りの都市を選択してください。その後、「変更を保存」ボタンをクリックします。
		
		<h3>データベース管理</h3>
		通常、この設定を変更する必要はありませんが、データベースをコンピュータ上の別の場所に配置したい場合（例：クラウドストレージフォルダ）、ここで設定できます。ただし、この設定を変更すると、データベースの場所が指定した特定の場所に固定されます。データベースをポータブルに保つには、これらの値を変更しないでください。
		
		<h3>設定に関する注意：</h3>
		\"notebubble\"フォルダを削除すると、アプリがリセットされ、ノートと設定が初期化されます。すべてをポータブルに保つには、フォルダをアプリの実行可能ファイルと一緒に配置してください。
	</div>
	</div>
</div>";

echo renderPage($content);

